<template>
  <div class="multiple-choice topic_item">
    <!-- 题干 -->
    <div class="stem">
      <span class="order">{{ topic.order || "" }}. &nbsp;</span>
      <span class="title"
        ><span style="color: #a8a8b3">(多选题)</span>{{ topic.title }}</span
      >
    </div>
    <!-- 选项 -->
    <div class="opts">
      <ol type="A">
        <li
          :class="choices.indexOf(getOrder(idx)) == -1 ? '' : 'active'"
          @click="handleClick(idx)"
          v-for="(opt, idx) in topic.opts"
          :key="opt"
        >
          {{ opt }}
        </li>
      </ol>
    </div>

    <answer-explain
      v-if="type == 3"
      :reviewResult="reviewResult"
    ></answer-explain>
  </div>
</template>

<script>
import AnswerExplain from "@/components/AnswerExplain.vue";

export default {
  props: ["topic", "finish", "type", "answer", "reviewResult"],
  data() {
    return {
      choices: [],
    };
  },
  components: {
    AnswerExplain,
  },
  methods: {
    handleClick(index) {
      if (this.type == 0 || this.type == 1) {
        /* 
        1.如果那个选项不在choices中就加入
        2.             在choices中就移除
        
        */
        const order = this.getOrder(index);
        const pos = this.choices.indexOf(order);
        if (pos == -1) {
          // 向choices中加入opt
          this.choices.push(order);
        } else {
          // 从choices中移除opt
          this.choices.splice(pos, 1);
        }
        // 结束了就往答题卡里面放
        this.finish(this.topic.order - 1, this.choices);
      } else if (this.type == 1) {
      }
    },
    getOrder(idx) {
      const orders = ["A", "B", "C", "D", "E", "F", "G", "H", "I"];
      return orders[idx];
    },
  },
  mounted() {
    if (this.answer) {
      this.choices = this.answer;
    }
  },
};
</script>

<style lang='less' scoped>
.multiple-choice {
  .stem {
  }

  .opts {
    ol {
      li {
        cursor: pointer;
      }
    }
  }
}
.active {
  color: #21a0ff;
}
</style>